<template>
  <div class="chat-bg" :style="'height: '+windowHeight+'px;'">
    <div class="chat" :style="'height: '+chatHeight+'px;'" style="display: flex;justify-content: space-between;">
        <!--左-->
        <div style="display: flex;flex-direction:column;width: 320px;background-color: #292B2E;" :style="'height: '+chatHeight+'px;'">

          <!--一-->
          <div class="flex align-center" style="height: 75px;justify-content: space-between;">
            <div class="flex align-center justify-center">
              <div style="margin-left: 15px;margin-right: 15px;">
                <img src="../../assets/logo.png" style="width: 54px;height: 54px;border-radius: 50%;border: 1px solid #4F5054;">
              </div>
              <span style="color: #E8E9E9;font-size: 18px;">QQxiaodi</span>
            </div>
            <div class="flex align-center justify-center">
              <span class="icon iconfont icon-tianjia1" style="color: #CCCCCC;margin-right: 15px;font-size: 18px;"></span>
              <span class="icon iconfont icon-liebiao" style="color: #CCCCCC;margin-right: 15px;font-size: 18px;"></span>
            </div>
          </div>


          <!--二-->
          <div class="flex justify-center align-center"
            style="background-color: #33353A;height: 50px;">
            <div class="flex justify-center align-center" style="background-color: #4F5054;width: 290px;height: 34px;border-radius: 5px;">
              <div class="flex justify-center align-center" style="flex: 1;">
                <span class="icon iconfont icon-sousuo" style="color: #CCCCCC;"></span>
              </div>
              <!--<div class="flex" style="flex: 11;color: #CCCCCC;">查找联系人或群</div>-->
              <div class="flex" style="flex: 11;">
                <input type="text" class="searchbox"
                       style="width: 262px;caret-color:white;background-color:#4F5054;margin: 0;padding: 0;border: 1px solid #4F5054;outline:none;color: #CCCCCC;" placeholder="查找联系人或群"></input>
              </div>
            </div>

          </div>
          <div style="height: 1px;background-color: #4F5054;"></div>

          <!--三-->
          <div style="display: flex;flex-direction:column;height: 780px;overflow-y: auto;" class="scroll-y">
            <div v-for="index in 11" :key="index" style="height: 78px;">
              <div class="flex align-center justify-between"
              style="background-color: #33353A;height: 77px;"
              v-on:mouseenter="mouseenter(index)" :style="current==index?'background-color: #3A3C42;':''">
                <div class="flex" style="flex: 1;">
                  <img src="../../assets/logo.png" style="width: 52px;height: 52px;border-radius: 50%;margin-left: 15px;margin-right: 15px;border: 1px solid #4F5054;">
                </div>
                <div class="flex flex-column" style="flex: 4;">
                  <div class="flex align-center justify-between" style="margin-bottom: 10px;">
                    <span style="color: #E8E9E9;font-size: 14px;">昵称名字</span>
                    <span style="margin-right: 15px;color: #959595;font-size: 12px;">05-19</span>
                  </div>
                  <div class="flex align-center justify-between">
                    <span style="color: #959595;font-size: 14px;">测试专用数据，哈哈哈</span>
                    <span class="flex align-center justify-center"
                      style="margin-right: 15px;background-color: #FF2C34;width: 30px;height: 18px;color: #FFFFFF;border-radius: 15px;">41</span>
                  </div>
                </div>
              </div>
              <div style="background-color: #292B2E;height: 1px;"></div>
            </div>
          </div>
          <!--</div>-->

          <div style="display: flex;background-color: #33353A;height: 48px;"></div>
        </div>
        <!--右-->
        <div style="margin: auto;">
          <span class="align-center-text" style="color: #AEB2B8;font-size: large;width: 830px;"
                :style="'line-height: '+chatHeight+'px;'">您还未选中或发起聊天，快去跟好友聊一聊吧</span>
        </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Home",
      data() {
        return {
          current:0,
          listMouseEventBgColor:'background-color: #3A3C42;',
          windowHeight:0,
          chatHeight:0
        }
      },
      mounted:function(){
        this.windowHeight = document.documentElement.clientHeight;
        this.chatHeight = this.windowHeight - 20;
        // this.windowHeight = window.innerHeight;
        console.log(this.windowHeight);
      // :style="'height:'+windowHeight+';'"
      //   style="background-color: red;height: 800px;"
      },
      methods:{
        mouseenter(index){
          this.current = index;
          // this.listMouseEventBgColor = 'background-color: #3A3C42;';
        }
      }

    }
</script>

<style scoped>
.chat-bg{
  background-color:#D2D4E0;
  display: flex;
}
.chat{
  margin: auto;
  /*height: 890px;*/
  width: 1150px;
  align-self: center;
  background-color: #EEEEEE;
}
/*一行文本垂直居中，使用line-height*/
  .align-center-text{
    /*line-height: 200px;*/
    /*text-align: center;*/
    overflow: hidden;
  }
  /*滚动条尺寸*/
  .scroll-y::-webkit-scrollbar{
    width: 5px;
    height: 780px;
  }
/*滚动条里面小方块*/
.scroll-y::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ADAAA9;
}
/*滚动条里面轨道*/
.scroll-y::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #E0DEDE;
}
  .flex{
    display: flex;
  }
  .flex-column{
    flex-direction:column;
  }
.justify-center {
  justify-content:center;
}
.justify-between{
  justify-content: space-between;
}
.align-center{
  align-items: center;
}
  .searchbox::-webkit-input-placeholder{
    color: #CCCCCC;
    font-size:13px;
  }
</style>
